<template>
  <view class="content">
    <!-- 银联收款码申请结果 -->
    <block v-if="type == 1">
      <view class="top-img">
        <image :src="$store.state.imgBaseUrl + '/qrcode/result/auditing.png'" v-if="isHaveStoreCollect == 1 || isHaveStoreCollect == 4 || isHaveStoreCollect == 7"></image>
        <image :src="$store.state.imgBaseUrl + '/qrcode/result/fail.png'" v-else></image>
      </view>
      <view class="r-text">
        <text>
          {{isHaveStoreCollect == 1 ? '信息已经提交审核' : isHaveStoreCollect == 4 ? '协议资料已经提交审核' : isHaveStoreCollect == 2 ? '等待信息补充中' : isHaveStoreCollect == 3 ? '信息审核驳回' : isHaveStoreCollect == 6 ? '协议资料审核驳回' : isHaveStoreCollect == 7 ? '协议资料审核通过' :''}}
        </text>
      </view>
      <view class="hint" v-if="isHaveStoreCollect == 1 || isHaveStoreCollect == 4">
        <view>您提交的收款码申请正在审核中</view>
        <view>我们将尽快处理请耐心等待</view>
      </view>
      <view class="hint" v-else-if="isHaveStoreCollect == 7">
        <view>协议资料已提交至银联，等待审核中！</view>
      </view>
      <view class="hint" v-else>
        {{info}}
      </view>
      <view class="footer" v-if="isHaveStoreCollect == 3 || isHaveStoreCollect == 6">
        <button type="primary" class="sub-btn cur" plain="true" @click="draw">重新申请</button>
      </view>
      <view class="footer" v-else>
        <button type="primary" class="sub-btn cur" plain="true" @click="draw">查看申请信息</button>
      </view>
    </block>
    <!--  -->
    <!-- 易生支付收款码申请结果 -->
    <block v-if="type == 2">
      <view class="top-img">
        <image :src="$store.state.imgBaseUrl + '/qrcode/result/auditing.png'" v-if="isHaveEasypay == 0 || isHaveEasypay == 2 || isHaveEasypay == 3 || isHaveEasypay == 4"></image>
        <image :src="$store.state.imgBaseUrl + '/qrcode/result/fail.png'" v-else></image>
      </view>
      <view class="r-text">
        <text>
          {{isHaveEasypay == 1 ? '信息审核驳回' : isHaveEasypay == 0 ? '信息已经提交审核' : isHaveEasypay == 2 ? '信息待签约' : isHaveEasypay == 3 ? '信息待终审' : isHaveEasypay == 4 ? '等待易生审核认证' : isHaveEasypay == 5 ? '信息终审失败' : ''}}
        </text>
      </view>
      <view class="hint" v-if="isHaveEasypay == 0 || isHaveEasypay == 2 || isHaveEasypay == 3 || isHaveEasypay == 4">
        <view>您提交的收款码申请{{isHaveEasypay == 0 ? '审核中' : isHaveEasypay == 2 ? '待签约' : isHaveEasypay == 3 ? '待终审' : isHaveEasypay == 4 ? '等待易生审核认证中' : ''}}</view>
        <view>我们将尽快处理请耐心等待</view>
      </view>
      <view class="hint" v-else>
        {{info}}
      </view>
      <view class="footer" v-if="isHaveEasypay == 1">
        <button type="primary" class="sub-btn cur" plain="true" @click="draw">重新申请</button>
      </view>
      <view class="footer" v-else>
        <button type="primary" class="sub-btn cur" plain="true" @click="draw">查看申请信息</button>
      </view>
    </block>
    <!--  -->
    
    
  </view>
</template>

<script>
import { getEasyPayInfoApi, getBankQrcodeApi } from '@/service/qrCode/qrCode.service.js'
export default {
  data() {
    return {
      item: null,
      bankQrcodeId: null, // 银联收款码ID
      easypayQrcodeId: null, // 易生支付收款码ID
      status: null, // 收款码的各个状态
      type: null, // 1: 银联收款码 2：易生支付收款码
      info: null
    };
  },
  computed: {
    isHaveStore () {
      return this.$store.state.userInfo.isHaveStore; // 是否有店铺（-1未申请，0审核中，1审核通过，2驳回，3下线，4审核失败）
    },
    isHaveEasypay () {
      return this.$store.state.userInfo.isHaveEasypay; // 是否有易生收款码（-1未申请，0待初审,1驳回,2待签约,3待终审,4终审通过,5终审失败） ,6，微信认证成功
    },
    isHaveStoreCollect () {
      return this.$store.state.userInfo.isHaveStoreCollect; // 是否有银联收款码（-1未申请，0未提交,1待审核，2审核通过(未补充)，3驳回） ,4：审核通过（已补充）5：银联审核通过 6: 合同资料审核驳回  7: 合同资料审核通过
    }
  },
  onLoad (option) {
    // this.status = option.status;
    this.type = option.type;
  },
  onShow() {
    if (this.type == 1) {
      this.getBankQrcodeStatusInfo();
    } else if (this.type == 2) {
      this.getEasyPayQrcodeStatusInfo();
    }
  },
  methods: {
    getBankQrcodeStatusInfo () {
      getBankQrcodeApi({}, res => {
        if (res.status == 0) {
          this.bankQrcodeId = res.data.id;
          this.info = res.data.remark;
        }
      });
    },
    getEasyPayQrcodeStatusInfo () {
      getEasyPayInfoApi({}, res => {
        if (res.status == 0) {
          this.easypayQrcodeId = res.data.id;
        }
      });
    },
    draw () {
      if (this.type == 1) {
        if (this.isHaveStoreCollect == 6) {
          uni.navigateTo({
            url: '/pages/qrCode/applyBank/uploadFile'
          });
        } else {
          uni.navigateTo({
            url: '/pages/qrCode/applyBank/step1?id=' + this.bankQrcodeId
          });
        }
      } else if (this.type == 2) {
        uni.navigateTo({
          url: '/pages/qrCode/applyEasypay/step1?id=' + this.easypayQrcodeId
        });
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 100vh;
  background-color: #FFFFFF;
  padding-top: 27rpx;
}
image {
  width: 100%;
  height: 100%;
}
.result {
  padding-top: 40rpx;
  height: 100vh;
  background-color: #FFFFFF;
}
.top-img {
  width: 330rpx;
  height: 330rpx;
  margin: 0 auto 30rpx;
}
.r-text {
  text-align: center;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.hint {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 52rpx;
  text-align: center;
  padding: 0 60rpx;
  line-height: 1.6;
}
.icon-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150rpx;
  .box {
    color: #999999;
    font-size: 29rpx;
    image {
      display: block;
      width: 51rpx;
      height: 51rpx;
      margin: 0 auto 25rpx;
    }
    &.over {
      color: #434343;
    }
  }
  .line {
    width: 87rpx;
    height: 1px;
    background: #E1E1E1;
    margin-left: 18rpx;
    margin-right: 29rpx;
  }
}
.footer {
  width: 100%;
  border-top: 1px solid #E1E1E1;
  padding: 14rpx 0 20rpx;
  background-color: #FFFFFF;
  position: absolute;
  bottom: 0;
  left: 0;
  button {
    height: 70rpx;
    margin: 0 32rpx;
    background-color: #636363;
    font-size: 30rpx;
    line-height: 70rpx;
    color: #ADA697;
    border: none;
    &.cur {
      color: #F6DA99;
      background-color: #434343;
    }
  }
}
</style>
